import './index.css'
import { Button, Flex, Avatar, Space, Drawer, message, Upload } from 'antd'
import React, { useState, useRef, useEffect, useCallback } from 'react'
import { MenuOutlined,CloudSyncOutlined,ArrowDownOutlined,ArrowRightOutlined,ArrowLeftOutlined,UserOutlined,PlusOutlined,BarChartOutlined,HomeOutlined,UploadOutlined } from '@ant-design/icons'
let Header = () => {
    const [open, setOpen] = useState(false)
    const [placement, setPlacement] = useState("left");
    const showDrawer = () => {
    setOpen(true)
    }
    const onClose = () => {
    setOpen(false)
    }

    return (
        <div>
         <MenuOutlined
          onClick={showDrawer}
          style={{ color: "#fff", margin: "16px" }}
        />
        <Button
          style={{ border: "none" }}
          ghost>
          文件
        </Button>
        <Button
          style={{ border: "none" }}
          ghost>
          调整尺寸和魔力转换
        </Button>
        <ArrowLeftOutlined style={{ margin: "10px 10px 10px 10px" }} />
        <ArrowRightOutlined style={{ margin: "10px 10px 10px 10px" }} />
        <CloudSyncOutlined style={{ margin: "10px 10px 10px 10px" }} />
        <div className="headerri">
          <Button
            style={{ border: "none" }}
            disabled
            ghost>
            未命名的设计- 海报
          </Button>
          <Button ghost>新人半价</Button>
          <Avatar
            style={{ margin: "10px -5px 10px 10px" }}
            size="large"
            icon={<UserOutlined />}
          />
          <Avatar
            size="large"
            icon={<PlusOutlined />}
          />
          <BarChartOutlined
            style={{
              fontSize: "20px",
              margin: "10px 10px 10px 10px",
              width: "40px",
              height: "40px",
              border: "1px solid #fff",
              textAlign: "center",
            }}
          />
          <Button style={{ height: "40px" }}>
            <UploadOutlined />
            导出
          </Button>
        </div>

        <Space></Space>
        <Drawer
          onClose={onClose}
          open={open}
          key={placement}
          placement={placement}>
          <div style={{ width: "20%" }}>
            <img
              className="img"
              src="https://static.canva.cn/web/images/e1787d84651689b6f20de2ebd8d86baf.svg"
            />
          </div>
          <Button
            style={{
              width: "100%",
              background: "#7830e6",
              height: "40px",
              color: "#fff",
            }}>
            <PlusOutlined />
            创建设计
          </Button>
          <div className="sycm">
            <HomeOutlined style={{ margin: "15px" }} />
            首页
          </div>
        </Drawer>
        </div>
)
}

export default Header